<template>
  <a-modal :open="open" width="1200px" title="选择处置套餐" destroy-on-close centered @ok="onOk" @cancel="onCancel">
    <div class="flex justify-between">
      <a-input v-model:value="searchkey" class="w-60" placeholder="套餐名称/助记码" allow-clear />
      <a-space>
        <a-button type="default" @click="onReset">重置</a-button>
        <a-button type="primary" @click="onSearch">搜索</a-button>
      </a-space>
    </div>
    <div class="flex justify-between h-[440px] mt-2">
      <div class="w-60 bg-thin h-full flex flex-col items-center">
        <a-tabs v-model:active-key="suitType" centered>
          <a-tab-pane :key="1" tab="科室" />
          <a-tab-pane :key="0" tab="个人" />
          <a-tab-pane :key="2" tab="全院" />
          <a-tab-pane key="" tab="全部" />
        </a-tabs>
        <SuitList
          ref="suitListRef"
          preview
          :suit-type="suitType"
          :search-params="{ isRegTc: 1, dictOutpMatterId: dictMatterId }"
          :search-key="searchkey"
          :template-type="3"
          @select="onSelectSuit"
        />
      </div>
      <div class="flex-1 ml-4 w-full overflow-hidden">
        <BaseTable
          :loading="loading"
          :height="387"
          :expanded-row-keys="expandedRowKeys"
          :data-source="dataSource"
          column-code="00001192"
          :scroll="{ x: 1000 }"
          :exclude-columns="['action']"
        >
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex === 'link'">
              <div class="table-link"></div>
            </template>
            <template v-if="column.dataIndex === 'no'">
              {{ index + 1 }}
            </template>
            <template v-if="column.dataIndex === 'sfxm'">
              <MedicineInfo :value="{ mc: record.sfxm?.mc, gg: record.sfxm?.gg, cj: record.sfxm?.cj }" />
            </template>
            <template v-if="column.dataIndex === 'yf'">
              {{ record.yf?.fyff }}
            </template>
            <template v-if="column.dataIndex === 'jlsl'"> {{ record.jlsl || 0 }} {{ record.sfxm?.jldw }} </template>
            <template v-if="column.dataIndex === 'cfts'"> {{ record.cfts }}天 </template>
            <template v-if="column.dataIndex === 'sl'"> {{ record.sl }}{{ record.sfxm?.dw }} </template>
            <template v-if="column.dataIndex === 'pl'">
              {{ record.pl?.pl }}
            </template>
          </template>
        </BaseTable>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import BaseTable from '@/components/BaseTable'
import SuitList from '@/views/out-doctor/components/SuitList'
import useStore from '@/views/out-doctor/store'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  dictMatterId: {
    type: [String, Number],
    default: ''
  }
})
const store = useStore()
const searchkey = ref('')
const suitListRef = ref()
const suitType = ref(1)
const selectedSuit = ref(null)
const expandedRowKeys = ref([])
const params = computed(() => {
  return {
    tcid: selectedSuit.value?.tcid,
    czcf: 0,
    zjm: searchkey.value
  }
})

const { loading, dataSource, getData } = useFetch({
  url: '/outp/template/getClinicalOrderPackageItemList',
  params,
  onSuccess: (data) => {
    if (!data.length) return
    expandedRowKeys.value = data.map((item) => 'row-key-' + item.id)
    dataSource.value = data.map((child) => ({
      ...child,
      yf: child.yf || {},
      pl: child.pl || {},
      key: 'row-key-' + child.id,
      children: child.children ? child.children.map((c) => ({ ...c, yf: c.yf || {}, pl: c.pl || {}, isChild: true, cfbh: 0, fkey: child.id, key: c.id })) : []
    }))
  }
})

const onCancel = () => {
  suitType.value = 1
  searchkey.value = ''
  emit('update:open', false)
}
const onSelectSuit = (select) => {
  selectedSuit.value = select
  getData()
}
watch(
  () => props.open,
  (val) => {
    !val && onCancel()
  }
)
const onSearch = () => {
  store.currentSuit = {}
  suitListRef.value.getData()
}

const onReset = () => {
  suitType.value = 1
  searchkey.value = ''
  suitListRef.value.getData()
}
const onOk = async () => {
  emit('success', selectedSuit.value)
  onCancel()
}
</script>
<style lang="less" scoped>
:deep(.ant-table-row-expand-icon) {
  display: none;
}
</style>
